<template>
    <div>
        <el-dialog
            title="教室管理"
            :visible.sync="dialogVisible"
            @closed="close"
            :close-on-click-modal="false"
            @open="open"
            width="800px">
            <el-table
                    ref="table"
                    :data="tableData"
                    stripe
                    border
                    size="small"
                    style="width: 100%">
                    <el-table-column
                    type="index"
                    width="50">
                    </el-table-column>
                    <el-table-column
                    label="教室名称"
                    prop="CR_Name"
                    min-width="120">
                    </el-table-column>
                    <el-table-column
                    prop="CR_Area"
                    label="面积"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    label="配置清单"
                    width="100">
                        <template slot-scope="scope">
                            <el-button  @click="handleClickLook(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="CR_Time"
                    label="投入使用"
                    width="150">
                    </el-table-column>
                    <el-table-column
                    prop="CR_Camera"
                    label="教室实况"
                    width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.CR_Camera">
                                <el-button  @click="lookCamera(scope.row)" type="text" size="small"><i class="el-icon-video-camera"></i></el-button>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    width="130">
                        <template slot-scope="scope">
                            <el-button  @click="handleClickedit(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
                            <el-button  @click="handleClickdelete(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bottom-pages clearfix">
                    <el-button class="fl" @click="handleClickAdd" type="primary" size="small">新增</el-button>
                    <div class="fr">
                        <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="10"
                        :pager-count="5"
                        layout="total, prev, pager, next"
                        :total="count">
                        </el-pagination>
                    </div>
                </div>
        </el-dialog>
        <ele-camera ref="camera" :video-src="videoSrc"></ele-camera>
        <ele-look-rome ref="lookinfo" :info="romeinfo"></ele-look-rome>
        <ele-class-rome ref="classrome" :title="addTitle" @addsuccess="getClassRoomInfoInit" :eidtinfo="eidtinfo"></ele-class-rome>
    </div>
</template>
<script>
import eleClassRome from './add-class-rome.vue'
import eleLookRome from './look-rome-qd.vue'
import eleCamera from './look-camera.vue'
import {getClassRoom,deletClassRoom} from '@/api/index.js'
export default {
    components:{
        eleClassRome,
        eleLookRome,
        eleCamera
    },
    data() {
        return {
            dialogVisible:false,
            tableData:[],
            currentPage:1,
            addTitle:'新增教室',
            romeinfo:'',
            eidtinfo:'',
            count:0,
            videoSrc:''
        }
    },
    methods:{
        save(){
            
            
        },
        open(){
            this.getClassRoomInfoInit()
        },
        getClassRoomInfoInit() {
            this.currentPage = 1;
            this.getClassRoomInfo()
        },
        getClassRoomInfo() {
            let params ={
                bCR_Name:'',
                bPage:(this.currentPage - 1) * 10 + 1,
                bPage1:this.currentPage * 10,
                bSort:'',
                bSx:''
            }
            getClassRoom(params).then((res) => {
                if(res) 
                {
                    this.tableData = res.tableData;
                    this.count = res.total_rows;
                }
            })
        },
        handleCurrentChange(val){
            this.currentPage = val;
            this.getClassRoomInfo()
        },
        // 查看实况
        lookCamera(row){
            this.videoSrc = row.CR_Camera;
            this.$refs.camera.dialogVisible = true;
        },
        handleClickedit(row){
            this.addTitle = '编辑教室';
            this.eidtinfo = row;
            this.$refs.classrome.dialogVisible = true;
            
        },
        handleClickAdd(){
            this.addTitle = '新增教室';
            this.eidtinfo = "";
            this.$refs.classrome.dialogVisible = true;
        },
        // 删除
        handleClickdelete(row){
            this.$util.openTips.call(this,'是否确定删除？')
            .then((res) => {
                deletClassRoom({bCID:row.CID}).then((res) => {
                    if(res) {
                        this.$util.tipsMsg('success','删除成功！');
                        this.getClassRoomInfo();
                    }
                }).catch((err) => {
                    console.log(err)
                })
            }).catch((err) => {
                console.log(err)
            })
        },
        handleClickLook(row){
            this.$refs.lookinfo.dialogVisible = true;
            this.romeinfo = row.CR_QD;
        },
        close(){
            
        }
    }
}
</script>
<style lang="less" scoped>
.user-img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
</style>
